<template>
    <div class="input_div">
        <input type="text" @blur="input" :placeholder="text">
    </div>
</template>
<script>
export default ({
    props: {
        text: {
            type: String,
        },
        value: {
            type: String,
        }
    },
    data() {
        return {

        }
    },
    methods: {
        input(e) {
            this.$emit('update:value', e.target.value)
        }
    }
})
</script>
<style scoped lang="scss">
@function r($v) {
    @return $v / (390 /10rem)
}

.input_div {
    width: 100%;
    border-bottom: 1px solid #eee;
    padding: r(15);
    display: flex;
    align-items: center;

    input::placeholder {
        color: grey;
    }

    input {
        font-size: r(18);
        width: 100%;
    }
}
</style>